<template>
  <div class="view-header">
    <h2 class="view-title">{{ title }}</h2>
    <p v-if="subtitle" class="view-subtitle">{{ subtitle }}</p>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title: string
  subtitle?: string
}

defineProps<Props>()
</script>

<style scoped>
.view-header {
  margin-bottom: 32px;
}

.view-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color-primary);
  margin-bottom: 8px;
}

.view-subtitle {
  color: var(--text-color-secondary);
  font-size: 14px;
  margin: 0;
}
</style>

